//封装路由规则
import React from 'react';
import { Switch, Route, Redirect, withRouter } from 'react-router-dom'
// 1.导入组件
// import Home from './pages/Home'
// const Home = React.lazy(()=>import('./pages/Home'))
import Login from './pages/first-router/login'
import Register from './pages/first-router/register'
import Index from './pages/first-router/index'
import Datelis from './pages/first-router/details'
import Search from './pages/first-router/search';
import Order from './pages/first-router/order';
import Coupon from './pages/first-router/coupon.jsx';

// 2.配置路由规则
const routes = [
    // 重定向规则
    {
        path: '/',//访问地址
        redirect: '/login',//重定向滴啊之
        exact: true,//是否做精准匹配
        isLogin: false,//是否做登录验证
    },

    // 普通路由规则
    {
        path: '/login',//访问地址
        component: Login,//访问组件
        exact: false,
        isLogin: false,
        meta: {
            title: '登录'
        }
    },
    {
        path: '/coupon',//访问地址
        component: Coupon,//访问组件
        exact: false,
        isLogin: false,
        meta: {
            title: '登录'
        }
    },
    {
        path: '/search',//访问地址
        component: Search,//访问组件
        exact: false,
        isLogin: false,
        meta: {
            title: '搜索'
        }
    },
    {
        path: '/order',//访问地址
        component: Order,//访问组件
        exact: false,
        isLogin: false,
        meta: {
            title: '确认订单'
        }
    },

    {
        path: '/register',//访问地址
        component: Register,//访问组件
        exact: false,
        isLogin: false,
        meta: {
            title: '注册'
        }
    },
    {
        path: '/details/:id',//访问地址
        component: Datelis,//访问组件
        exact: false,
        isLogin: false,
        meta: {
            title: '详情'
        }
    },

    {
        path: '/index',//访问地址
        component: Index,//访问组件
        exact: false,
        isLogin: false,
        meta: {
            title: '首页'
        }
    },

    // {
    //     path:'/details/:id',//访问地址
    //     component:Details,//访问组件
    //     exact:false,
    //     isLogin:true,
    //     meta:{//路由元信息
    //         title:'新闻详情'
    //     }
    // },

    // {
    //     path:'*',//访问地址
    //     component:NotFound,//访问组件
    //     exact:false,
    //     isLogin:false,
    //     meta:{//路由元信息
    //         title:'404'
    //     }
    // },
]

function RouterView() {
    return <Switch>
        {routes.map(item => {
            // 判断是够有component组件
            if (item.component) {

                return <Route path={item.path} key={item.path} exact={item.exact} render={() => {
                    // 1.设置路由元信息
                    if (item.meta) document.title = item.meta.title
                    // 2.判断是否需要登录
                    if (item.isLogin) {
                        const token = localStorage.getItem('token')
                        if (!token) {
                            return <Redirect to="/login"></Redirect>
                        }
                    }
                    // 显示组件
                    const Component = withRouter(item.component)
                    return <Component></Component>
                }}></Route>
            }
            // 没有component组件
            return <Route key={item.path} path={item.path} exact={item.exact}>
                <Redirect to={item.redirect}></Redirect>
            </Route>

        })}
    </Switch>
}


export default RouterView